<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Studio7 - Digital Agency</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <head>

        <meta charset="UTF-8">

        <link rel="apple-touch-icon" type="image/png"
            href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
        <meta name="apple-mobile-web-app-title" content="CodePen">

        <link rel="shortcut icon" type="image/x-icon"
            href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">

        <link rel="mask-icon" type=""
            href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
            color="#111">


        <title>CodePen - FCC2 Personal Web Page</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="https://fonts.googleapis.com/css?family=Raleway:400,800" rel="stylesheet">

        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet"
            href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="./css/style.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
    </head>

<body data-spy="scroll" data-target=".navbar" data-offset="0">

    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                    <i class="fa fa-align-justify fa-lg" title="Align Justify"></i>
                </button>
                <a class="navbar-brand" href="#home">Quentin.G</a>
            </div>
            <div class="collapse navbar-collapse " id="navbar">
                <ul class="nav navbar-nav navbar-right">
                    <li class=""><a href="#About">About</a></li>
                    <li><a href="#Portfolio">Portfolio</a></li>
                    <li><a href="#Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <section class="container-fluid home text-center paralax" id="welcome-section">
        <div class="" id="homeH1">
            <h1>Quentin<br>Gabriele</h1>
            <div class="homeSocial">
                <a href="https://twitter.com/QuentinGabriele" target="_blank" title="My Twitter">
                    <i class="fa fa-twitter fa-2x fa-fw"></i></a>
                <a href="https://www.freecodecamp.com/crakerss" target="_blank" title="My freeCodeCamp">
                    <i class="fa fa-free-code-camp fa-2x fa-fw"></i></a>
                <a href="https://github.com/CRAKERSS" target="_blank" title="My GitHub" id="profile-link"><i
                        class="fa fa-github fa-2x fa-fw"></i></a>
            </div>
        </div>

        <a href="#About"><i class="fa fa-angle-double-down fa-4x welcomeI"></i></a>
    </section>



    <div class="container-fluid">

        <div class="row about" id="About">
            <div class="container">
                <div class="row relative">
                    <div class="col-md-2 Me-tag hidden-sm hidden-xs">
                        <svg>
                            <defs>
                                <pattern id="forest" patternUnits="userSpaceOnUse" width="300" height="300">
                                    <image
                                        xlink:href="https://res.cloudinary.com/crakerss/image/upload/c_scale,q_auto:low,w_720/v1502969988/CDF.jpg"
                                        width="300" height="300" />
                                </pattern>
                            </defs>
                            <text y="1.2em">ME</text>
                        </svg>
                    </div>
                    <div class="col-md-6 col-sm-8 text-about text-center max-height">
                        <div class="">
                            <p class="">I'm a french student, passionated about tech & science.
                            <h4>freeCodeCamper</h4>
                            </p>
                        </div>
                    </div>
                    <div class="col-md-4 col-sm-offset-0 col-sm-4 col-xs-6 col-xs-offset-3">
                        <div class="img-shape"> <img class="img-responsive  img-about"
                                src="https://res.cloudinary.com/crakerss/image/upload/q_20/v1502971787/Profile.jpg"
                                alt="my photo"></div>
                    </div>
                </div>
            </div>
        </div>


        <section class="row portfolio" id="projects">
            <div class="TitleSection paralax">
                <h1 class="text-center">FCC PORTFOLIO</h1>
            </div>

            <div class="container relative" id="portfolioContent">

                <div class="row SC showcase-1 paralax project-tile">
                    <div class="col-sm-6 max-height relative">
                        <span class="VTA">
                            <p class="text-right"><span>
                                    <a target="_blank" href="https://codepen.io/CRAKERSS/full/KqZqQa/" title="Visit It">
                                        A Twitch TV APP
                                    </a>
                                </span></p>
                        </span>
                    </div>
                    <div class="col-sm-6 hidden-xs max-height">
                        <img class=" VTA"
                            src="https://res.cloudinary.com/crakerss/image/upload/q_auto:eco/v1502989950/FCC/FCC6.png" />
                    </div>
                </div>

                <div class="row SC showcase-2 paralax">

                    <div class="col-sm-6 hidden-xs max-height relative">
                        <img class=" VTA"
                            src="https://res.cloudinary.com/crakerss/image/upload/q_auto:eco/v1503012638/FCC_POMODORO_L.png" />
                    </div>
                    <div class=" col-sm-6 max-height relative">
                        <span class="VTA">
                            <p class=""> <span> <a href="https://codepen.io/CRAKERSS/full/qXNqmL/" target="_blank"
                                        title="Visit It">A pomodoro clock </a></span></p>
                        </span>
                    </div>

                </div>

                <div class="row SC showcase-3 paralax">
                    <div class=" col-sm-6 max-height relative">
                        <span class="VTA">
                            <p class="text-right"> <span><a href="https://codepen.io/CRAKERSS/full/QMbjwW/"
                                        target="_blank" title="Visit It"> A Javascript calculator </a></span></p>
                        </span>
                    </div>
                    <div class="col-sm-6 hidden-xs max-height">
                        <img class=" VTA"
                            src="https://res.cloudinary.com/crakerss/image/upload/q_auto:eco/c_crop,g_center,h_1547,w_1632,x_0/v1509109795/CodePen_FCC_Calculator_alternate_design.png" />
                    </div>
                </div>

            </div>
        </section>


        <div class="row contact" id="Contact">
            <div class="TitleSection paralax">
                <h1 class="text-center">CONTACT</h1>
            </div>
            <div class="container">


                <div class="col-sm-6">
                    <form>
                        <div class="form-group">
                            <input type="text" class="form-control input-lg" id="name" placeholder="Name">
                        </div>
                        <div class="form-group">
                            <input type="email" class="form-control input-lg" id="email" placeholder="email">
                        </div>
                        <div class="form-group">
                            <textarea class="form-control input-lg" rows="8" id="message"
                                placeholder="Send me a message" cols="100"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary disabled">Send</button>
                    </form>
                </div>
                <div class="col-sm-6 ">
                    <div class="card text-center">
                        <img src="https://res.cloudinary.com/crakerss/image/upload/q_20/v1503052200/Profile_2.jpg"
                            class="img-responsive">
                        <div class="cardText">
                            <h2>Quentin Gabriele</h2>
                            <p>French front-end FCC camper</p>
                            <div class="cardSocial">
                                <a href="https://twitter.com/QuentinGabriele" target="_blank" title="My Twitter">
                                    <i class="fa fa-twitter fa-2x fa-fw"></i></a>
                                <a href="https://www.freecodecamp.com/crakerss" target="_blank" title="My freeCodeCamp">
                                    <i class="fa fa-free-code-camp fa-2x fa-fw"></i></a>
                                <a href="https://github.com/CRAKERSS" target="_blank" title="My GitHub"><i
                                        class="fa fa-github fa-2x fa-fw"></i></a>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

    </div>

    <footer class="container-fluid paralax">
        <div class="row">
            <div class="col-xs-12">
                <h4 class="text-center">Made by <a href="https://codepen.io/CRAKERSS/" target="_blank"
                        title="my CodePen Account">Quentin.G</a></h4>
            </div>
        </div>
    </footer>
    <script src="./js/main.js"></script>
</body>

</html>